<template>
  <div class="empBasic">
    <div>
      <div>
        <div style="  display: flex; justify-content: center;">
          <div>
            <el-input
              class="el-input_search usersSearch"
              placeholder="通过员工名进行搜索......"
              prefix-icon="el-icon-search"
              v-model="empName"
              clearable
              @clear="initEmps"
              @keydown.enter.native="doEmpSearch"
            >
            </el-input>
            <el-button type="primary" icon="el-icon-search" @click="doEmpSearch"
              >搜索</el-button
            >
            <el-button type="primary" @click="searchDrawer = true"
              ><i class="fa fa-angle-double-down"></i>高级搜索</el-button
            >
          </div>
        </div>
      </div>
      <div class="file">
        <el-button type="primary" class="el-input_head" @click="showEmpAddView"
          ><i class="fa fa-plus" aria-hidden="true"></i>添加员工</el-button
        >
        <el-upload
          style="display: inline-flex; margin: 0 10px"
          action="/employee/basic/import"
          :headers="headers"
          :show-file-list="false"
          :on-success="uploadSuccess"
          :on-error="uploadError"
          :disabled="importDataDisabled"
          :before-upload="beforeUpload"
        >
          <el-button
            type="success"
            :icon="importDataBtnIcon"
            :disabled="importDataDisabled"
            class="el-input_head"
            >{{ importDataBtnText }}</el-button
          >
        </el-upload>
        <el-button type="success" class="el-icon-download" @click="exportData"
          >导出数据</el-button
        >
      </div>
    </div>
    <div class="empTable">
      <el-table
        v-loading="empLoading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        :data="emps.data"
        style="width: 100%"
        stripe
        border
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="id" width="55" align="left">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="88"
          align="left"
        ></el-table-column>
        <el-table-column
          prop="gender"
          label="性别"
          width="70"
          align="left"
        ></el-table-column>
        <el-table-column
          prop="workID"
          label="工号"
          width="190"
          align="left"
        ></el-table-column>
        <el-table-column
          prop="department.name"
          label="所属部门"
          width="110"
          align="left"
        ></el-table-column>
        <el-table-column
          prop="position.name"
          label="职位"
          width="110"
          align="left"
        ></el-table-column>
        <el-table-column
          prop="joblevel.name"
          label="职称等级"
          width="130"
          align="left"
        ></el-table-column>
        <el-table-column
          prop="workState"
          label="在职状态"
          width="80"
          align="left"
        ></el-table-column>
        <el-table-column
          prop="conversionTime"
          label="签约日期"
          width="110"
          align="left"
        ></el-table-column>
        <el-table-column
          prop="engageForm"
          label="合同类型"
          width="90"
          align="left"
        ></el-table-column>
        <el-table-column
          prop="beginContract"
          label="合同起始"
          width="110"
          align="left"
        ></el-table-column>
        <el-table-column
          prop="endContract"
          label="合同结束"
          width="110"
          align="left"
        ></el-table-column>
        <el-table-column
          prop="contractTerm"
          label="合同期限"
          width="80"
          align="left"
        ></el-table-column>
        <el-table-column
          prop="phone"
          label="联系方式"
          width="130"
          align="left"
        ></el-table-column>
        <el-table-column
          prop="email"
          label="邮箱"
          width="190"
          align="left"
        ></el-table-column>
        <el-table-column type="expand" label="其他" width="100">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="姓名">
                <span>{{ props.row.name }}</span>
              </el-form-item>
              <el-form-item label="身份证号">
                <span>{{ props.row.idCard }}</span>
              </el-form-item>
              <el-form-item label="民族">
                <span>{{ props.row.nation.name }}</span>
              </el-form-item>
              <el-form-item label="籍贯">
                <span>{{ props.row.nativePlace }}</span>
              </el-form-item>
              <el-form-item label="联系地址">
                <span>{{ props.row.address }}</span>
              </el-form-item>
              <el-form-item label="政治面貌">
                <span>{{ props.row.politicsStatus.name }}</span>
              </el-form-item>
              <el-form-item label="婚姻情况">
                <span>{{ props.row.wedlock }}</span>
              </el-form-item>
              <el-form-item label="毕业院校">
                <span>{{ props.row.school }}</span>
              </el-form-item>
              <el-form-item label="入职时间">
                <span>{{ props.row.beginDate }}</span>
              </el-form-item>
              <el-form-item label="专业">
                <span>{{ props.row.specialty }}</span>
              </el-form-item>
              <el-form-item label="学历">
                <span>{{ props.row.tiptopDegree }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button size="medium" @click="showEditEmpView(scope.row)"
              >编辑
            </el-button>
            <el-button
              size="medium"
              type="danger"
              @click="doEmpDelete(scope.row)"
              >删除
            </el-button>
          </template>
        </el-table-column>
        <!--        <el-table-column-->
        <!--          prop="nation.name"-->
        <!--          label="民族"-->
        <!--          width="60"-->
        <!--          align="left"-->
        <!--        ></el-table-column>-->
        <!--        <el-table-column-->
        <!--          prop="nativePlace"-->
        <!--          label="籍贯"-->
        <!--          width="80"-->
        <!--          align="left"-->
        <!--        ></el-table-column>-->
        <!--        <el-table-column-->
        <!--          prop="address"-->
        <!--          label="联系地址"-->
        <!--          width="170"-->
        <!--          align="left"-->
        <!--        ></el-table-column>-->
        <!--        <el-table-column-->
        <!--          prop="politicsStatus.name"-->
        <!--          label="政治面貌"-->
        <!--          width="120"-->
        <!--          align="left"-->
        <!--        ></el-table-column>-->
        <!--        <el-table-column-->
        <!--          prop="school"-->
        <!--          label="毕业院校"-->
        <!--          width="160"-->
        <!--          align="left"-->
        <!--        ></el-table-column>-->
        <!--        <el-table-column-->
        <!--          prop="beginDate"-->
        <!--          label="入学日期"-->
        <!--          width="100"-->
        <!--          align="left"-->
        <!--        ></el-table-column>-->
        <!--        <el-table-column-->
        <!--          prop="specialty"-->
        <!--          label="专业"-->
        <!--          width="160"-->
        <!--          align="left"-->
        <!--        ></el-table-column>-->
        <!--        <el-table-column-->
        <!--          prop="tiptopDegree"-->
        <!--          label="学位"-->
        <!--          width="60"-->
        <!--          align="left"-->
        <!--        ></el-table-column> -->
      </el-table>
      <div>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 20, 30, 40, 50]"
          layout="total,sizes, prev, pager, next, jumper"
          :total="emps.total"
          background
        >
        </el-pagination>
      </div>
    </div>
    <!--添加员工，更新员工弹窗-->
    <div>
      <el-dialog
        :title="title"
        :visible.sync="addEmpDialogFormVisible"
        width="60%"
      >
        <div class="addEmpDialogInfo">
          <el-form
            status-icon
            :rules="empsRules"
            ref="empForm"
            :model="updEmp"
            label-width="100px"
            class="demo-ruleForm"
            ><el-row :gutter="20">
              <el-col :span="8"
                ><el-form-item label="姓名" prop="name">
                  <el-input
                    v-model="updEmp.name"
                    prefix-icon="el-icon-edit"
                    placeholder="请输入姓名"
                  ></el-input> </el-form-item
              ></el-col>
              <el-col :span="8"
                ><el-form-item label="性别" prop="gender">
                  <div>
                    <el-radio v-model="updEmp.gender" label="男">男</el-radio>
                    <el-radio v-model="updEmp.gender" label="女">女</el-radio>
                  </div>
                </el-form-item></el-col
              >
              <el-col :span="8"
                ><el-form-item label="出生日期" prop="birthday">
                  <div class="block">
                    <el-date-picker
                      v-model="updEmp.birthday"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="选择日期"
                    >
                    </el-date-picker>
                  </div> </el-form-item
              ></el-col>
            </el-row>
            <el-row :gutter="20"
              ><el-col :span="8"
                ><el-form-item label="政治面貌" prop="politicId">
                  <el-select
                    filterable
                    v-model="updEmp.politicId"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in politicsStatus"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select> </el-form-item></el-col
              ><el-col :span="8"
                ><el-form-item label="民族" prop="nationId">
                  <el-select
                    filterable
                    v-model="updEmp.nationId"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in nations"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select> </el-form-item
              ></el-col>
              <el-col :span="8"
                ><el-form-item label="身份证号码" prop="idCard">
                  <el-input
                    v-model="updEmp.idCard"
                    prefix-icon="el-icon-postcard"
                    placeholder="请输入身份证号码"
                  ></el-input> </el-form-item
              ></el-col>
            </el-row>
            <el-row :gutter="20"
              ><el-col :span="8"
                ><el-form-item label="联系方式" prop="phone">
                  <el-input
                    v-model="updEmp.phone"
                    prefix-icon="el-icon-phone-outline"
                    placeholder="请输入联系方式"
                  ></el-input> </el-form-item
              ></el-col>
              <el-col :span="8"
                ><el-form-item label="电子邮箱" prop="email">
                  <el-input
                    v-model="updEmp.email"
                    prefix-icon="el-icon-message"
                    placeholder="请输入电子邮箱"
                  ></el-input> </el-form-item
              ></el-col>

              <el-col :span="8"
                ><el-form-item label="婚姻状况" prop="wedlock">
                  <div>
                    <el-radio v-model="updEmp.wedlock" label="已婚"
                      >已婚</el-radio
                    >
                    <el-radio v-model="updEmp.wedlock" label="未婚"
                      >未婚</el-radio
                    ><el-radio v-model="updEmp.wedlock" label="离异"
                      >离异</el-radio
                    >
                  </div>
                </el-form-item></el-col
              >
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8"
                ><el-form-item label="籍贯" prop="nativePlace">
                  <el-input
                    v-model="updEmp.nativePlace"
                    prefix-icon="el-icon-edit"
                    placeholder="请输入籍贯"
                  ></el-input> </el-form-item
              ></el-col>
              <el-col :span="16"
                ><el-form-item label="联系地址" prop="address">
                  <el-input
                    v-model="updEmp.address"
                    prefix-icon="el-icon-edit"
                    placeholder="请输入联系地址"
                  ></el-input> </el-form-item
              ></el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8"
                ><el-form-item label="职位" prop="posId">
                  <el-select
                    filterable
                    v-model="updEmp.posId"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in positions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select> </el-form-item
              ></el-col>
              <el-col :span="8"
                ><el-form-item label="职称" prop="jobLevelId">
                  <el-select
                    filterable
                    v-model="updEmp.jobLevelId"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in jobLevels"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select> </el-form-item
              ></el-col>
              <el-col :span="8"
                ><el-form-item label="所属部门" prop="departmentId">
                  <el-select v-model="showDepName" placeholder="请选择部门">
                    <el-option value="0" v-show="false"> </el-option>
                    <!--el-tree绑定的数组中children里的key值不能是0-->
                    <el-tree
                      ref="tree"
                      :data="deps"
                      node-key="key"
                      default-expand-all
                      @node-click="handleNodeClick"
                      :props="depProps"
                    >
                    </el-tree>
                  </el-select> </el-form-item
              ></el-col>
            </el-row>
            <el-row :gutter="20"
              ><el-col :span="8"
                ><el-form-item label="聘用形式" prop="engageForm">
                  <div>
                    <el-radio v-model="updEmp.engageForm" label="劳动合同"
                      >劳动合同</el-radio
                    >
                    <el-radio v-model="updEmp.engageForm" label="劳务合同"
                      >劳务合同</el-radio
                    >
                  </div>
                </el-form-item></el-col
              ><el-col :span="8"
                ><el-form-item label="入职日期" prop="beginDate">
                  <div class="block">
                    <el-date-picker
                      v-model="updEmp.beginDate"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="选择日期"
                    >
                    </el-date-picker>
                  </div> </el-form-item></el-col
              ><el-col :span="8"
                ><el-form-item label="转正日期" prop="conversionTime">
                  <div class="block">
                    <el-date-picker
                      v-model="updEmp.conversionTime"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="选择日期"
                    >
                    </el-date-picker>
                  </div> </el-form-item></el-col
            ></el-row>
            <el-row :gutter="20"
              ><el-col :span="8"
                ><el-form-item label="合同起始" prop="beginContract">
                  <div class="block">
                    <el-date-picker
                      v-model="updEmp.beginContract"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="选择日期"
                    >
                    </el-date-picker>
                  </div> </el-form-item></el-col
              ><el-col :span="8"
                ><el-form-item label="合同截止" prop="endContract">
                  <div class="block">
                    <el-date-picker
                      v-model="updEmp.endContract"
                      type="date"
                      value-format="yyyy-MM-dd"
                      placeholder="选择日期"
                    >
                    </el-date-picker>
                  </div> </el-form-item
              ></el-col>
              <el-col :span="8"
                ><el-form-item label="工号" prop="workID">
                  <el-input
                    v-model="updEmp.workID"
                    prefix-icon="el-icon-edit"
                    placeholder="请输入工号"
                    disabled
                  ></el-input> </el-form-item
              ></el-col>
            </el-row>
            <el-row :gutter="20"
              ><el-col :span="8"
                ><el-form-item label="毕业院校" prop="school">
                  <el-input
                    v-model="updEmp.school"
                    prefix-icon="el-icon-edit"
                    placeholder="请输入毕业院校"
                  ></el-input> </el-form-item></el-col
              ><el-col :span="8"
                ><el-form-item label="专业" prop="specialty">
                  <el-input
                    v-model="updEmp.specialty"
                    prefix-icon="el-icon-edit"
                    placeholder="请输入专业"
                  ></el-input> </el-form-item
              ></el-col>
              <el-col :span="8"
                ><el-form-item label="学历" prop="tiptopDegree">
                  <el-select
                    filterable
                    v-model="updEmp.tiptopDegree"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="(item, index) in tiptopDegrees"
                      :key="index"
                      :label="item"
                      :value="item"
                    >
                    </el-option>
                  </el-select> </el-form-item></el-col
            ></el-row>
            <!--            <el-form-item>-->
            <!--              <el-button type="primary" @click="submitForm('ruleForm')"-->
            <!--                >提交</el-button-->
            <!--              >-->
            <!--              <el-button @click="resetForm('ruleForm')">重置</el-button>-->
            <!--            </el-form-item>-->
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addEmpDialogFormVisible = false">取 消</el-button>
          <el-button
            type="primary"
            v-if="title === '添加员工'"
            @click="doEmpAdd"
            >确 定</el-button
          >
          <el-button
            type="primary"
            v-else-if="title === '编辑员工信息'"
            @click="doEmpUpdate"
            >更 新</el-button
          >
        </div>
      </el-dialog>
    </div>
    <!--条件搜索抽屉-->
    <div>
      <el-drawer
        title="高级搜索"
        :visible.sync="searchDrawer"
        direction="ttb"
        custom-class="demo-drawer"
        ref="drawer"
        close-on-press-escape
      >
        <div class="demo-drawer__content">
          <el-form
            status-icon
            :model="searchEmp"
            ref="drawer"
            class="demo-ruleForm"
            style="margin: 0 50px"
          >
            <el-row :gutter="20"
              ><el-col :span="5"
                ><el-form-item label="政治面貌" prop="politicId">
                  <el-select
                    filterable
                    v-model="searchEmp.politicId"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in politicsStatus"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select> </el-form-item></el-col
              ><el-col :span="4"
                ><el-form-item label="民族" prop="nationId">
                  <el-select
                    filterable
                    v-model="searchEmp.nationId"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in nations"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select> </el-form-item
              ></el-col>
              <el-col :span="5"
                ><el-form-item label="职位" prop="posId">
                  <el-select
                    filterable
                    v-model="searchEmp.posId"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in positions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select> </el-form-item
              ></el-col>
              <el-col :span="5"
                ><el-form-item label="职称" prop="jobLevelId">
                  <el-select
                    filterable
                    v-model="searchEmp.jobLevelId"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in jobLevels"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select> </el-form-item
              ></el-col>
              <el-col :span="5"
                ><el-form-item label="所属部门" prop="departmentId">
                  <el-select v-model="searchDepName" placeholder="请选择部门">
                    <el-option value="0" v-show="false"> </el-option>
                    <!--el-tree绑定的数组中children里的key值不能是0-->
                    <el-tree
                      ref="tree"
                      :data="deps"
                      node-key="key"
                      default-expand-all
                      :expand-on-click-node="false"
                      @node-click="searchHandleNodeClick"
                      :props="depProps"
                    >
                    </el-tree>
                  </el-select> </el-form-item
              ></el-col>
            </el-row>
            <el-row :gutter="20"
              ><el-col :span="8"
                ><el-form-item label="聘用形式" prop="engageForm">
                  <div>
                    <el-radio v-model="searchEmp.engageForm" label="劳动合同"
                      >劳动合同</el-radio
                    >
                    <el-radio v-model="searchEmp.engageForm" label="劳务合同"
                      >劳务合同</el-radio
                    >
                  </div>
                </el-form-item></el-col
              ><el-col :span="8"
                ><el-form-item label="合同起止">
                  <div class="block">
                    <el-date-picker
                      v-model="searchEmp.beginDateScope"
                      type="daterange"
                      value-format="yyyy-MM-dd"
                      unlink-panels
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    >
                    </el-date-picker>
                  </div> </el-form-item
              ></el-col>
              <el-col :span="4" :offset="4"
                ><el-form-item label="">
                  <div class="block">
                    <div
                      class="demo-drawer__footer"
                      style="display: flex; justify-content: flex-end"
                    >
                      <el-button @click="searchDrawer = false">取 消</el-button>
                      <el-button type="primary" @click="conditionSearch"
                        >搜 索</el-button
                      >
                    </div>
                  </div>
                </el-form-item></el-col
              >
            </el-row>
          </el-form>
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<script>
export default {
  name: "EmpBasic",
  data() {
    return {
      searchUrl: "",
      //高级搜索
      searchDrawer: false,
      searchLoading: false,
      searchDepName: "",
      searchEmp: {
        nationId: null,
        politicId: null,
        departmentId: null,
        jobLevelId: null,
        posId: null,
        engageForm: null,
        beginDateScope: null
      },
      //导入数据按钮配置
      importDataBtnText: "导入数据",
      importDataBtnIcon: "el-icon-upload2",
      importDataDisabled: false,
      //导入请求头内容
      headers: {
        Authorization: window.sessionStorage.getItem("tokenStr")
      },
      //本页全部员工
      emps: {},
      //更新员工的数据
      updEmp: {
        name: "",
        gender: "",
        birthday: "",
        idCard: "",
        wedlock: "",
        nationId: null,
        nativePlace: "",
        politicId: null,
        email: "",
        phone: "",
        address: "",
        departmentId: null,
        jobLevelId: null,
        posId: null,
        engageForm: "",
        tiptopDegree: "",
        specialty: "",
        school: "",
        beginDate: "",
        workState: "在职",
        workID: "",
        contractTerm: null,
        conversionTime: "",
        notWorkDate: null,
        beginContract: "",
        endContract: "",
        workAge: null,
        salaryId: null
      },
      //搜索关键字
      empName: "",
      //表格数据加载
      empLoading: true,
      pageSize: 10,
      currentPage: 1,

      //添加员工弹出框
      addEmpDialogFormVisible: false,
      //窗口标题
      title: "",
      //民族
      nations: {},
      //政治面貌
      politicsStatus: {},
      //职位
      positions: {},
      //职称
      jobLevels: {},
      //部门
      deps: {},
      showDepName: "",
      //部门树配置
      depProps: {
        children: "children",
        label: "name"
      },
      //学位
      tiptopDegrees: [
        "博士",
        "硕士",
        "本科",
        "大专",
        "高中",
        "初中",
        "小学",
        "其他"
      ],
      //表单数据校验
      empsRules: {
        name: [{ required: true, message: "请输入员工姓名", trigger: "blur" }],
        gender: [
          { required: true, message: "请输入员工性别", trigger: "blur" }
        ],
        birthday: [
          { required: true, message: "请输入出生日期", trigger: "blur" }
        ],
        idCard: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
          {
            pattern: /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/,
            message: "身份证号码格式不正确",
            trigger: "blur"
          }
        ],
        wedlock: [
          { required: true, message: "请输入婚姻状况", trigger: "blur" }
        ],
        nationId: [{ required: true, message: "请输入民族", trigger: "blur" }],
        nativePlace: [
          { required: true, message: "请输入籍贯", trigger: "blur" }
        ],
        politicId: [
          { required: true, message: "请输入政治面貌", trigger: "blur" }
        ],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          { type: "email", message: "邮箱地址格式不正确", trigger: "blur" }
        ],
        phone: [{ required: true, message: "请输入联系方式", trigger: "blur" }],
        address: [
          { required: true, message: "请输入联系地址", trigger: "blur" }
        ],
        departmentId: [
          { required: true, message: "请输入所属部门", trigger: "blur" }
        ],
        jobLevelId: [
          { required: true, message: "请输入职称", trigger: "blur" }
        ],
        posId: [{ required: true, message: "请输入职位", trigger: "blur" }],
        engageForm: [
          { required: true, message: "请输入聘用形式", trigger: "blur" }
        ],
        tiptopDegree: [
          { required: true, message: "请输入学历", trigger: "blur" }
        ],
        specialty: [{ required: true, message: "请输入专业", trigger: "blur" }],
        school: [{ required: true, message: "请输入学校", trigger: "blur" }],
        beginDate: [
          { required: true, message: "请输入入职日期", trigger: "blur" }
        ],
        workID: [{ required: true, message: "请输入工号", trigger: "blur" }],
        conversionTime: [
          { required: true, message: "请输入转正日期", trigger: "blur" }
        ],
        beginContract: [
          { required: true, message: "请输入合同起始日期", trigger: "blur" }
        ],
        endContract: [
          { required: true, message: "请输入合同截止日期", trigger: "blur" }
        ]
      }
    };
  },
  mounted() {
    this.initEmps();
    this.initData();
    this.initPositions();
  },
  methods: {
    //部门树
    handleNodeClick(data) {
      this.showDepName = data.name;
      this.updEmp.departmentId = data.id;
      // console.log(this.updEmp.departmentId);
    },
    //高级搜索部门树
    searchHandleNodeClick(data) {
      this.searchDepName = data.name;
      this.searchEmp.departmentId = data.id;
      // console.log(this.updEmp.departmentId);
    },
    conditionSearch() {
      let url =
        "/employee/basic/?size=" +
        this.pageSize +
        "&currentPage=" +
        this.currentPage;
      this.searchUrl = "";
      if (this.searchEmp.politicId) {
        this.searchUrl += "&politicId=" + this.searchEmp.politicId;
      }
      if (this.searchEmp.nationId) {
        this.searchUrl += "&nationId=" + this.searchEmp.nationId;
      }
      if (this.searchEmp.posId) {
        this.searchUrl += "&posId=" + this.searchEmp.posId;
      }
      if (this.searchEmp.jobLevelId) {
        this.searchUrl += "&jobLevelId=" + this.searchEmp.jobLevelId;
      }
      if (this.searchEmp.engageForm) {
        this.searchUrl += "&engageForm=" + this.searchEmp.engageForm;
      }
      if (this.searchEmp.departmentId) {
        this.searchUrl += "&departmentId=" + this.searchEmp.departmentId;
      }
      if (this.searchEmp.beginDateScope) {
        this.searchUrl += "&beginDateScope=" + this.searchEmp.beginDateScope;
      }
      this.getRequest(url + this.searchUrl).then(resp => {
        if (resp) {
          this.searchDrawer = false;
          this.emps = resp;
          this.searchEmp = {
            nationId: null,
            politicId: null,
            departmentId: null,
            jobLevelId: null,
            posId: null,
            engageForm: null,
            beginDateScope: null
          };
        }
      });
    },
    //工号
    getMaxWorkId() {
      this.getRequest("/employee/basic/maxworkid").then(resp => {
        if (resp) {
          this.updEmp.workID = resp.obj;
        }
      });
    },
    //职位
    initPositions() {
      this.getRequest("/employee/basic/positions")
        .then(resp => {
          if (resp) {
            this.positions = resp;
          }
        })
        .catch(() => {});
    },
    //初始化常用数据
    initData() {
      //民族
      if (!window.sessionStorage.getItem("nations")) {
        this.getRequest("/employee/basic/nations")
          .then(resp => {
            if (resp) {
              this.nations = resp;
              window.sessionStorage.setItem("nations", JSON.stringify(resp));
            }
          })
          .catch(() => {});
      } else {
        this.nations = JSON.parse(window.sessionStorage.getItem("nations"));
      }
      //政治面貌
      if (!window.sessionStorage.getItem("politics")) {
        this.getRequest("/employee/basic/politics")
          .then(resp => {
            if (resp) {
              this.politicsStatus = resp;
              window.sessionStorage.setItem(
                "politicsStatus",
                JSON.stringify(resp)
              );
            }
          })
          .catch(() => {});
      } else {
        this.politicsStatus = JSON.parse(
          window.sessionStorage.getItem("politicsStatus")
        );
      }

      //职称
      if (!window.sessionStorage.getItem("jobLevels")) {
        this.getRequest("/employee/basic/joblevels")
          .then(resp => {
            if (resp) {
              this.jobLevels = resp;
              window.sessionStorage.setItem("jobLevels", JSON.stringify(resp));
            }
          })
          .catch(() => {});
      } else {
        this.jobLevels = JSON.parse(window.sessionStorage.getItem("jobLevels"));
      }

      //部门
      if (!window.sessionStorage.getItem("deps")) {
        this.getRequest("/employee/basic/deps")
          .then(resp => {
            if (resp) {
              this.deps = resp;
              window.sessionStorage.setItem("deps", JSON.stringify(resp));
            }
          })
          .catch(() => {});
      } else {
        this.deps = JSON.parse(window.sessionStorage.getItem("deps"));
      }
    },
    //初始员工数据
    initEmps() {
      this.getRequest(
        "/employee/basic/?size=" +
          this.pageSize +
          "&currentPage=" +
          this.currentPage
      ).then(resp => {
        if (resp) {
          this.emps = resp;
          this.empLoading = false;
        }
      });
    },
    //搜索员工
    doEmpSearch() {
      this.currentPage = 1;
      this.getRequest(
        "/employee/basic/?size=" +
          this.pageSize +
          "&currentPage=" +
          this.currentPage
      )
        .then(resp => {
          if (resp) {
            this.emps = {};
            this.emps = resp;
            this.searchUrl = "";
            this.$message.success("查找员工成功！");
          }
        })
        .catch(() => {
          this.$message.error("查找失败！");
        });
    },
    //更新员工
    showEmpAddView() {
      this.title = "添加员工";
      this.updEmp = {
        name: "",
        gender: "",
        birthday: "",
        idCard: "",
        wedlock: "",
        nationId: null,
        nativePlace: "",
        politicId: null,
        email: "",
        phone: "",
        address: "",
        departmentId: null,
        jobLevelId: null,
        posId: null,
        engageForm: "",
        tiptopDegree: "",
        specialty: "",
        school: "",
        beginDate: "",
        workState: "在职",
        workID: "",
        contractTerm: null,
        conversionTime: "",
        notWorkDate: null,
        beginContract: "",
        endContract: "",
        workAge: null,
        salaryId: null
      };
      this.initPositions();
      this.getMaxWorkId();
      this.showDepName = "";
      this.addEmpDialogFormVisible = true;
    },
    doEmpAdd() {
      this.$refs["empForm"].validate(valid => {
        if (valid) {
          this.postRequest("/employee/basic/", this.updEmp)
            .then(resp => {
              if (resp) {
                this.addEmpDialogFormVisible = false;
                this.updEmp = "";
              }
            })
            .catch(() => {});
        }
      });
    },
    //更新员工窗口
    showEditEmpView(data) {
      this.title = "编辑员工信息";
      this.updEmp = data;
      this.showDepName = data.department.name;
      this.initPositions();
      this.addEmpDialogFormVisible = true;
    },
    //更新员工方法
    doEmpUpdate() {
      this.$refs["empForm"].validate(valid => {
        if (valid) {
          this.putRequest("/employee/basic/", this.updEmp)
            .then(resp => {
              if (resp) {
                this.addEmpDialogFormVisible = false;
                this.initEmps();
              }
            })
            .catch(() => {});
        }
      });
    },
    //删除员工
    doEmpDelete(data) {
      this.$confirm(
        "此操作将永久删除员工 [" + data.name + "] ,是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "waring"
        }
      )
        .then(() => {
          this.deleteRequest("/employee/basic/" + data.id).then(resp => {
            if (resp) {
              let index = this.emps.data.indexOf(data);
              if (index > -1) {
                this.emps.data.splice(index, 1);
              }
            }
          });
        })
        .catch(() => {});
    },
    //分页方法
    handleSizeChange(val) {
      this.pageSize = val;
      this.getRequest(
        "/employee/basic/?size=" +
          this.pageSize +
          "&currentPage=" +
          this.currentPage +
          this.searchUrl +
          "&name=" +
          this.empName
      )
        .then(resp => {
          if (resp) {
            this.emps = {};
            this.emps = resp;
          }
        })
        .catch(() => {});
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getRequest(
        "/employee/basic/?size=" +
          this.pageSize +
          "&currentPage=" +
          this.currentPage +
          this.searchUrl +
          "&name=" +
          this.empName
      )
        .then(resp => {
          if (resp) {
            this.emps = {};
            this.emps = resp;
          }
        })
        .catch(() => {});
    },
    //导出员工数据
    exportData() {
      this.downloadRequest("/employee/basic/export");
    },
    //导入数据
    beforeUpload() {
      this.importDataBtnIcon = "el-icon-loading";
      this.importDataBtnText = "正在导入";
      this.importDataDisabled = true;
    },
    //导入数据上传成功
    uploadSuccess() {
      this.importDataBtnIcon = "el-icon-upload2";
      this.importDataBtnText = "导入数据";
      this.importDataDisabled = false;
      this.initEmps();
    },
    //导入数据上传失败
    uploadError() {
      this.importDataBtnIcon = "el-icon-upload2";
      this.importDataBtnText = "导入数据";
      this.importDataDisabled = false;
    }
  }
};
</script>

<style>
.empBasic .usersSearch {
  width: 500px;
}
.empBasic .file {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.empBasic .empTable {
  margin-top: 30px;
}

.empBasic .el-table__fixed-right {
  height: 100% !important;
}
.empBasic .el-table__fixed {
  height: 110px !important;
}
.empBasic .demo-table-expand {
  font-size: 0;
}
.empBasic .demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.empBasic .demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.empBasic .el-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
  white-space: nowrap;
  padding: 2px 5px;
  color: #303133;
  font-weight: 700;
}
.empBasic .el-select {
  width: 100%;
}
</style>
